<template>
  <div>
    <el-dialog
      title="合作商详情"
      :visible="visible"
      @close="closeFn"
      width="40%"
    >
      <el-row>
        <el-col :span="12"
          ><div class="grid-content bg-purple">合作商名称: {{ this.find.name }}</div></el-col
        >
        <el-col :span="12"
          ><div class="grid-content bg-purple-light">
            联系人: {{ this.find.contact }}
          </div></el-col
        >
        <el-col :span="12"
          ><div class="grid-content bg-purple">
            联系电话: {{ this.find.mobile }}
          </div></el-col
        >
        <el-col :span="12"
          ><div class="grid-content bg-purple-light">
            分成比例: {{ this.find.ratio }}%
          </div></el-col
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },

  props: {
    visible: {
      type: Boolean,
      required: true
    },
    find: {
      type: Object,
      required: true
    }
  },
  methods: {
    closeFn () {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
